<template>
    <v3-form :items="items" :model="model" :isAlone="true" :formItemSlotIdx="[2, 4, 6]">
        <template #formItem="form">
            <el-form-item label="11111" prop="name.a">
                <el-input v-model="form['sex']" placeholder="请输入sex"></el-input>
            </el-form-item>
            <el-form-item label="22222" prop="alias">
                <el-input v-model="form['alias']" placeholder="请输入alias"></el-input>
            </el-form-item>
            <el-form-item label="33333" prop="address" :rules="[{ required: true, message: '请输入address', trigger: 'blur' }]">
                <el-input v-model="form['address']" placeholder="请输入address"></el-input>
            </el-form-item>
        </template>
    </v3-form>
</template>
<script setup>
import member from './config'
// import asyncSelect from '../components/widget/asyncSelect.vue'
// import fileUpload from '../components/widget/fileUpload.vue'
// import imgUpload from '../components/widget/imgUpload.vue'
// import selectTree from '../components/widget/selectTree.vue'
// import datePicker from '../components/widget/datePicker.vue'
import v3Form from '../components/widget/v3Form.vue'
import { reactive } from 'vue';

const handleFetch = (obj) => {
    console.log('handleFetch---', obj)
}
const handleEvent = (obj) => {
    console.log('handleEvent---', obj)
}
const handle = (obj, row, ref) => {
    console.log('handle---', obj, row, model)
    ref.validate((valid) => {
        if (valid) {
        console.log('submit!')
        } else {
        console.log('error submit!')
        }
    })
}
const items = [
    {
        "label": "用户名称",
        "prop": "name.a",
        "tag": "input",
        "config": {
            "clearable": true,
            "placeholder": "请输入用户名称",
            "data": {},
            "rules": [{ "required": true, "message": '请输入用户名称', "trigger": 'blur' }]
        }
    },
    {
        "label": "手机号码",
        "prop": "phone",
        "config": {
            "tableLogic": "obj?.phone == '3' # rowClass('p-1')",
            "data": {}
        },
        "logic": "obj?.phone == '3'",
        "rowClass": "p-1"
    },
    {
        "label": "状态",
        "prop": "status",
        "tag": "select",
        "config": {
            "reqField": "status",
            "enums": {
                "active": "激活",
                "inactive": "禁用",
                "blocked": "锁定"
            }
        }
    },
    {
        "label": "创建时间",
        "prop": "createdAt",
        "tag": "datetimerange",
        "config": {
            "data": {}
        },
        "auxFunc": "dateFormatter2YMDHMS"
    },
    {
        "label": "性别",
        "prop": "sex",
        "tag": "select",
        "config": {
            "data": {
                "options": [
                    { "label": "男", "value": "男" },
                    { "label": "女", "value": "女" }
                ]
            }
        }
    },
    {
        "label": "邮箱",
        "prop": "email",
        "tag": "child",
        "config": {
            "clearable": true,
            "placeholder": "请输入email",
            "data": {},
        }
    },
    {   
        "tag": "button",
        "operations": [
            {
                "label": "编辑",
                "method": (obj, row) => {handle(obj, row)},
                "className": "edit"
            },
            {
                "label": "删除",
                "isPlain": true,
                "method": (obj, row) => {handle(obj, row)},
                "className": "delete"
            }
        ]
    }
]
const model = reactive({
        "status": 'active',
        "name.a": "张大千",
        "phone": 18,
        "sex": "男",
        'alias': "张三",
        "address": "北京市",
        'email': "123456789@qq.com",
        "createdAt": ["2022-08-01 00:00:00","2022-09-01 00:00:00"],
    })
</script>
<style>
.p-1{
    background-color: bisque;
}

.p-3 {
    background-color: aquamarine;
}
.normal{
    color: green;font-size: 14px;
}
.danger{
    color: red;font-size: 16px;
}
</style>
